<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
	姓名<input type="text" v-model="name"><br>
	成绩<input type="text" v-model.number="grades">
	<button @click="add()">添加</button>
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>成绩</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="item in newarr" :key="item.id">
				<td>{{item.name}}</td>
				<td>{{item.grades}}</td>
				<td><button @click="del(item.id)">删除</button><button @click="show(item.id)">修改成绩</button></td>
			</tr>
			<tr>
				<th>全班总分</th>
				<th>{{total}}</th>
			</tr>
			<tr>
				<th>全班平均分</th>
				<th>{{median}}</th>
			</tr>
		</tbody>
	</table>
	<select v-model="all">
		<option value="0">全部</option>
		<option value="1">及格</option>
		<option value="2">不及格</option>
	</select>
	
	<select v-model="sort">
		<option value="0">升序</option>
		<option value="1">降序</option>
	</select>
	<button @click="find()">筛选</button>
	<div v-show="is">
		请输入修改后的成绩<input type="text" v-model.number="grades">
		<button @click="apply()">确认修改</button>
	</div>
</div>
<script>
	new Vue({
		el: "#app",
		data: {
			autoID: 4,
			name:"",
			grades:"",
			sort:0,
			all:0,
			id:0,
			is:false,
			arr: [{
				id: 1,
				name: "张三",
				grades: 90
			}, {
				id: 2,
				name: "李四",
				grades: 57
			}, {
				id: 3,
				name: "王舞",
				grades: 67
			}],
			newarr:[{
				id: 1,
				name: "张三",
				grades: 90
			}, {
				id: 2,
				name: "李四",
				grades: 57
			}, {
				id: 3,
				name: "王舞",
				grades: 67
			}]
		},
		methods: {
			add(){
				this.arr.push({
					id:this.autoID,
					name:this.name,
					grades:this.grades
				})
				this.newarr=this.arr
				this.name="",
				this.grades=""
				this.autoID++
			},
			del(id){
				var index = this.arr.findIndex(item => item.id==id);
				this.arr.splice(index,1)
				this.arr=this.arr
			},
			find(){
				if(this.sort==0&&this.all==0){
					this.newarr= this.arr.sort((a,b)=>a.grades-b.grades)
				}else if(this.sort==1&&this.all==0){
					this.newarr= this.arr.sort((a,b)=>b.grades-a.grades)
				}else if(this.sort==0&&this.all==1){
					this.newarr=this.arr.filter(item=>item.grades>=60).sort((a,b)=>a.grades-b.grades)
				}else if(this.sort==1&&this.all==1){
					this.newarr=this.arr.filter(item=>item.grades>=60).sort((a,b)=>b.grades-a.grades)
				}else if(this.sort==0&&this.all==2){
					this.newarr=this.arr.filter(item=>item.grades<60).sort((a,b)=>a.grades-b.grades)
				}else if(this.sort==1&&this.all==2){
					this.newarr=this.arr.filter(item=>item.grades<60).sort((a,b)=>b.grades-a.grades)
				}
			},
			show(id){
				this.is=true
				this.id=id
			},
			apply(){
				this.arr.find(item=>item.id==this.id).grades=this.grades
				this.newarr=this.arr
				this.grades=""
				this.is=false
			}
			
		},
		computed: {
			total() {
				return this.arr.reduce((a,b)=>a+b.grades,0)
			},
			median() {
				return Math.floor(this.arr.reduce((a,b)=>a+b.grades,0)/this.arr.length)
			}
		}
	})
</script>